<template>
    <div :style="custStyle || {}" class="base-tag">
        <span><slot></slot></span>
        <span v-if="showClose" class="base-tag-close">
            <span class="close-icon">
                <BaseIcon class="cursor-pointer" color="#ffffff" name="ic_guanbi" size="10" @click="$emit('close')" />
            </span>
        </span>
    </div>
</template>

<script lang="ts" setup>
/**
 * @ClassName BaseTag
 * @Description 标签
 * @Author xuyizhuo
 * @Date 2024/12/20 21:13
 * @example
 */
defineEmits(['close'])
withDefaults(defineProps<{ showClose?: boolean; custStyle?: any }>(), {
    showClose: false,
    custStyle: {} as any,
})
</script>

<style lang="scss" scoped>
.base-tag {
    display: inline-block;
    border-radius: 4px;
    background: #fafafa;
    padding: 8px 12px;
    width: fit-content;
    color: #30333a;
    font-size: 14px;

    &-close {
        position: absolute;
        transform: translate(4px, -12px);

        // 关闭图标
        .close-icon {
            display: flex;
            position: relative;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: rgba(76, 76, 76, 0.55);
            width: 14px;
            height: 14px;
        }
    }
}
</style>
